import QtQuick 2.7
import QtQuick.Controls 2.1
import QtQuick.Layouts 1.3

Item {
    id: root

    property alias seekable: musicSlider.seekable
    property alias title: titleLabel.text
    property alias artist: artistLabel.text
    property alias coverArtUrl: coverArtImage.source
    property alias position: musicSlider.position
    property alias duration: musicSlider.duration
    signal playSeek(int pos);

    ColumnLayout {
        anchors.fill: parent

        Pane {
            Layout.fillWidth: true
            Layout.fillHeight: true
            ColumnLayout {
                anchors.centerIn: parent
                spacing: 16

                Item {
                    width: 256
                    height: 256
                    Image {
                        anchors.centerIn: parent
                        source: "qrc:/images/cover_background.jpg"
                        visible: coverArtImage.status != Image.Ready
                    }
                    Image {
                        id: coverArtImage
                        anchors.centerIn: parent
                        Layout.alignment: Qt.AlignHCenter
                        source: "qrc:/images/album.jpg"
                    }
                }
                Label {
                    id: titleLabel
                    font.pointSize: 24
                    elide: Text.ElideRight
                    Layout.alignment: Qt.AlignHCenter
                }
                Label {
                    id: artistLabel
                    font.pointSize: 24
                    elide: Text.ElideRight
                    Layout.alignment: Qt.AlignHCenter
                }
            }
        }

        MusicSlider {
            id: musicSlider
            Layout.alignment: Qt.AlignHCenter
            Layout.preferredWidth: parent.width * 0.8
            Layout.preferredHeight: 60
            onPlaySeek: root.playSeek(pos)
        }
    }
}
